import './CharacterPage.css'
import React from 'react'
import { List, Card, Typography, Avatar } from 'antd'
import Meta from 'antd/lib/card/Meta'
import user from './images/user.jpg'

const { Paragraph } = Typography

const CharacterPage = (props: any) => {
  return (
    <List
      rowKey="id"
      grid={{
        gutter: 16,
        xs: 1,
        sm: 2,
        md: 3,
        lg: 3,
        xl: 4,
        xxl: 4,
      }}
      dataSource={[...props.usersData, {}]}
      renderItem={(item) => {
        if (item && item.id) {
          return (
            <List.Item key={item.id}>
              <Card
                hoverable
                actions={[
                  <a key="addAccount">新增账号</a>,
                  <a key="manageAccount">管理账号</a>,
                ]}
                extra={[<a key="settings">配置权限</a>]}>
                <Meta
                  style={{
                    marginLeft: '20px',
                    display: 'flex',
                    flexDirection: 'row',
                    justifyContent: 'space-evenly',
                  }}
                  avatar={<Avatar size={100} src={item.avatar} />}
                />

                <Meta
                  style={{
                    textAlign: 'center',
                    display: 'flex',
                    flexDirection: 'row',
                    justifyContent: 'space-evenly',
                  }}
                  description={<h1>{item.name}</h1>}
                />
                <Meta
                  description={
                    <Paragraph ellipsis={{ rows: 3 }}>{item.desc}</Paragraph>
                  }
                />
                <Meta
                  description={
                    <Paragraph>
                      该角色目前已配置
                      <span style={{ color: 'red' }}>{item.setAccount}</span>
                      个账号
                    </Paragraph>
                  }
                />
                <Meta
                  description={
                    <Paragraph>
                      <a key="ViewPermissions">查看权限</a>
                    </Paragraph>
                  }
                />
              </Card>
            </List.Item>
          )
        }
        return (
          <List.Item key={item.id}>
            <Card hoverable actions={[<a key="addCharacters">新增角色</a>]}>
              <Meta
                style={{
                  marginTop: '40px',
                  marginLeft: '20px',
                  display: 'flex',
                  flexDirection: 'row',
                  justifyContent: 'space-evenly',
                }}
                avatar={<Avatar shape="square" size={100} src={user} />}
              />
              <Meta
                style={{
                  textAlign: 'center',
                  display: 'flex',
                  flexDirection: 'row',
                  justifyContent: 'space-evenly',
                }}
                description={<h1>自定义</h1>}
              />
              <Meta
                style={{
                  marginBottom: '90px',
                }}
                description={
                  <Paragraph ellipsis={{ rows: 3 }}>
                    配置自定义角色，并在该角色下配置员工账号，灵活管理商户平台权限
                  </Paragraph>
                }
              />
            </Card>
          </List.Item>
        )
      }}
    />
  )
}

export default CharacterPage
